<template>
    <!-- 最外围盒子 -->
    <view class="userControl-container">
        <!-- 搜索添加用户盒子 -->
        <addAndSearch addPageTitle="添加角色"></addAndSearch>

        <view class="popUp">
            <!-- 搜索弹出层 -->
            <popUp popUpType="roleControl"></popUp>
        </view>
        <!-- 列表 -->
        <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
            v-if="this.$store.getters.totalList.length == 0">
        </u-empty>
        <view class="list">
            <u-list @scrolltolower="scrolltolower" lowerThreshold="1">
                <u-list-item v-for="(item, index) in totalList" :key="index">
                    <u-cell :title="`角色:${item.roleName} `" :label='`状态: ${item.roleKey == 0 ? "禁用" : "正常"}`' value="详情"
                        isLink @click="userInfo(`${index + 1}`)">
                        <u-avatar slot="icon" shape="square" size="35" :src="item.url"
                            customStyle="margin: -3px 5px -3px 0"></u-avatar>
                    </u-cell>
                </u-list-item>
            </u-list>
        </view>
    </view>
</template>
  <!-- !!角色管理页面还差一个列表的添加页面没有实现,差在菜单的管理权限的树状图不知道要实现的效果为何种
    导致的详情页面展示和搜索页面的缺失部分功能
   -->
<script>
import { listRole } from "@/api/system/role";
import { addDateRange } from "@/utils/ruoyi";
export default {
    data() {
        return {
            // 列表初始值
            userList: null,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                roleName: undefined,
                roleKey: undefined,
                status: undefined,
            },
            // 日期范围
            dateRange: this.$store.getters.dateRange,
            // 请求列表
            localTotalList: [],
        };
    },
    created() {
        this.getList();
    },
    methods: {
        /** 点击查看用户详情 */
        userInfo(userId) {
            this.$tab.navigateTo(
                `/pages/work/userControl/CorU-User/index?title=用户修改&userId=${userId}`
            );
        },
        /** 查询列表 */
        async getList() {
            const response = await listRole(
                addDateRange(this.queryParams, this.dateRange)
            );
            this.userList = response.rows;
            this.total = response.total;
            if (this.queryParams.pageNum == 1) {
                this.localTotalList = this.userList
                this.$store.commit("syncGetList", this.userList);
                this.queryParams.pageNum++;
            }
        },
        // 滚动条滚动触发总事件
        scrolltolower() {
            this.loadmore();
            this.queryParams.pageNum++;
        },
        // 滚动触发事子事件(下滑加载更多)
        async loadmore() {
            if (this.localTotalList.length < this.total) {
                await this.getList();
                this.localTotalList = [...this.localTotalList, ...this.userList];
                this.$store.commit("syncGetList", this.localTotalList);
                return;
            }
            uni.showToast({ title: "到底了,没有更多了", icon: "none" });
        },
    },
    computed: {
        totalList() {
            return this.$store.getters.totalList
        },
    },
};
</script>
  
<style lang="scss" scoped>
@import "@/yangLaoAppStyle.scss";

.userControl-container {
    background-color: #fff;
    overflow: hidden;
}
</style>
  